{% extends "base.html" %} {% block mainbody %}

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<script language="JavaScript">
    function getCookie(c_name) {
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=")
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1
                c_end = document.cookie.indexOf(";", c_start)
                if (c_end == -1) c_end = document.cookie.length
                return unescape(document.cookie.substring(c_start, c_end))
            }
        }
        return ""
    }
    retcook = getCookie('AGraph_AJQCDJOWN63628df')
    if (retcook == "") {
        window.location.href = "/login";
    } else {
    }
</script>

<style>
    #viz {
        width: 1200px;
        height: 420px;
        border: 2px solid lightgray;
        font: 18pt arial;
    }
</style>
<title>知识洞察</title>
<div class="container">
    <div class="row">
        <!--head start-->
        <div class="col-md-12">
            <h3 class="page-header"><i class="fa fa-link" aria-hidden="true"></i> 知识洞察 </h3>
            <ol class="breadcrumb">
                <!--li><i class="fa fa-home"></i><a href="\">Home</a></li-->
                <li><i class="fa fa-link" aria-hidden="true"></i>洞察脉络 明悉真理</li>
            </ol>
        </div>
        <div class="layui-card">

            <div class="layui-card-header">实体关系类型</div>
            <div class="layui-card-body" id="en_re_list">
                <script>
                    $.ajax({
                        url: '../do_db_labels_types/',
                        type: 'post',
                        success: function (data) {
                            var addtemp = document.getElementById('en_re_list');
                            var html = ''
                            for (var i = 0; i < data.data.length; i++) {
                                //alert(data.data[i]['cont']);
                                html = html + data.data[i]['cont'];
                            }
                            addtemp.innerHTML = html


                        },
                    });
                </script>

            </div>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default">
                <header class="panel-heading">
                    查询条件：
                </header>
                <div class="panel-body  layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="form-group layui-inline">
                                <input type="text" id="entity1" name="entity1" class="layui-input" placeholder="实体名称"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="form-group layui-inline">
                                <input type="text" id="rel" name="rel" class="layui-input" placeholder="关系类型"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>


                        <!--dropdown combobox end-->

                        <div class="layui-inline">
                            <div class="form-group layui-inline">
                                <input type="text" id="entity2" name="entity2" class="layui-input" placeholder="实体名称"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select name="retlimt" lay-filter="retlimt" id="retlimt">
                                    <option value="50">返回节点上限(默认50)</option>
                                    <option value="20">20</option>
                                    <option value="30">30</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="btn-group layui-inline" style="padding: 2%">
                                <button type="button" id="btnSearch" class="btn btn-primary" onclick="draw();">
                                    查询
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p>
    <div class="layui-row">
        <div id="viz"></div>
    </div>
    </p>
</div>
<script>
    var viz;

    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;

    });

    function draw() {
        var entity1 = $('#entity1').val()
        var entity2 = $('#entity2').val()
        var rel = $.trim($('#rel').val())
        var retlimt = $('#retlimt').val()
        if (entity1.length == 0 && entity2.length == 0 && rel.length == 0) {
            layer.msg('请输入查询信息');
            return
        }
        console.log("entity1", entity1, "rel", rel, "entity2", entity2)
        console.log(entity1.length, rel.length, entity2.length)
        if (rel.length == 0 && entity1.length != 0 && entity2.length == 0) {
            cypherSQL = `MATCH (n1)-[r]-(n2) where n1.title=~".*${entity1}.*"   return n1,n2,r limit ${retlimt}`
            console.log(cypherSQL)
        }
        if (rel.length == 0 && entity1.length == 0 && entity2.length != 0) {
            cypherSQL = `MATCH (n1)-[r]-(n2) where n2.title=~".*${entity2}.*"   return n1,n2,r limit ${retlimt}`
            console.log(cypherSQL)
        }
        {#两个实体间不指定关系# }
        if (entity1.length != 0 && entity2.length != 0 && rel.length == 0) {
            cypherSQL = `MATCH (n1)-[r]-(n2) where n1.title=~".*${entity1}.*" and n2.title=~".*${entity2}.*" return n1,n2,r limit ${retlimt}`
            console.log(cypherSQL)
        }
        {#两个实体间指定关系# }
        if (entity1.length != 0 && entity2.length != 0 && rel.length != 0) {
            cypherSQL = `MATCH (n1)-[r:\`${rel}\`]-(n2) where n1.title=~".*${entity1}.*"  and n2.title=~".*${entity2}.*"  return n1,n2,r limit ${retlimt}`
            console.log(cypherSQL)
        }
        {#左实体间指定关系# }
        if (entity1.length != 0 && entity2.length == 0 && rel.length != 0) {

            cypherSQL = `MATCH (n1)-[r:\`${rel}\`]-(n2) where n1.title=~".*${entity1}.*"  return n1,n2,r limit ${retlimt}`
            console.log(cypherSQL)
        }
        {#右实体间指定关系# }
        if (entity1.length == 0 && entity2.length != 0 && rel.length != 0) {
            cypherSQL = `MATCH (n1)-[r:\`${rel}\`]-(n2) where  n2.title=~".*${entity2}.*" return n1,n2,r limit ${retlimt}`
            console.log(cypherSQL)
        }
        var server_url = ''
        var server_user = ''
        var server_password = ''
        $.ajax({
            url: '../getgrapinfo/',
            type: 'post',
            async: false,
            success: function (data) {
                //console.log(data.server_url)
                server_url = data.server_url
                server_user = data.server_user
                server_password = data.server_password
            },
        });
        console.log("cypherSQL", cypherSQL)
        var config = {
            container_id: "viz",
            server_url: server_url,
            server_user: server_user,
            server_password: server_password,
            arrows: true,
            labels: {
                [NeoVis.NEOVIS_DEFAULT_CONFIG]: {
                    "caption": "title"
                }
            },
            relationships: {
                "INTERACTS": {
                    "thickness": "weight",
                    "caption": false
                }
            },
            initial_cypher: cypherSQL
        };

        viz = new NeoVis.default(config);
        viz.render();
        console.log(viz);

    }

    $("#reload").click(function () {
        console.log("开始绘图")
        draw();
    });

</script>
<script>
    function runlab(obj) {
        searchval = $.trim(obj.innerText)
        //$("#entity1").val(obj.innerText);
        var server_url = ''
        var server_user = ''
        var server_password = ''
        $.ajax({
            url: '../getgrapinfo/',
            type: 'post',
            async: false,
            success: function (data) {
                //console.log(data.server_url)
                server_url = data.server_url
                server_user = data.server_user
                server_password = data.server_password
            },
        });
        cypherSQL = `MATCH (n1:\`${searchval}\`)  return n1  limit 50`
        var config = {
            container_id: "viz",
            server_url: server_url,
            server_user: server_user,
            server_password: server_password,
            arrows: true,
            labels: {
                [NeoVis.NEOVIS_DEFAULT_CONFIG]: {
                    "caption": "title"
                }
            },
            relationships: {
                "INTERACTS": {
                    "thickness": "weight",
                    "caption": false
                }
            },
            initial_cypher: cypherSQL
        };

        viz = new NeoVis.default(config);
        viz.render();
    }
    function runrel(obj) {

        //alert(obj.innerText);
        //document.getElementById("sp").click();
        //call db.labels
        //call db.relationshipTypes()
        //

        var server_url = ''
        var server_user = ''
        var server_password = ''
        $.ajax({
            url: '../getgrapinfo/',
            type: 'post',
            async: false,
            success: function (data) {
                //console.log(data.server_url)
                server_url = data.server_url
                server_user = data.server_user
                server_password = data.server_password
            },
        });
        searchval = $.trim(obj.innerText);
        $("#rel").val(searchval);
        cypherSQL = `MATCH (n1)-[r:\`${searchval}\`]-(n2)    return n1,n2,r limit 50`
        var config = {
            container_id: "viz",
            server_url: server_url,
            server_user: server_user,
            server_password: server_password,
            arrows: true,
            labels: {
                [NeoVis.NEOVIS_DEFAULT_CONFIG]: {
                    "caption": "title"
                }
            },
            relationships: {
                "INTERACTS": {
                    "thickness": "weight",
                    "caption": false
                }
            },
            initial_cypher: cypherSQL
        };

        viz = new NeoVis.default(config);
        viz.render();
    }
</script>
{% endblock %}